<template>
	<view class="list">
		<view class="list_item" v-for="(goods, index) in goodsList" v-bind:key="index" v-on:click.stop="router(goods.id)">
			<image :src="goods.cover_pic"></image>
			<view class="text">
				<text class="t">{{goods.name}}</text>
				<text class="s">100%好评</text>
				<view class="price">
					<text class="xj">{{goods.price_content}}</text>
					<text class="yj">{{goods.original_price}}</text>
				</view>
			</view>
			<view class="btns">
				<button v-on:click.stop="buyProduct(goods)">抢购</button>
				<text>{{goods.sales}}</text>
			</view>
		</view>
        <!--购物车-->
        <template v-if="isShowAttr">
            <app-attr
                :goods="attrGoods.goods"
                :previewUrl="previewUrl"
                :submitUrl="submitUrl"
                :attrGroupList="attrGoods.goods.attr_groups"
                :theme="theme"
                :show="attrGoods.attrShow"
            ></app-attr>
        </template>
		
	</view>	
</template>

<script>
    import { mapGetters, mapState } from "vuex";
    import appAttr from "../../../components/page-component/app-attr/app-attr.vue";
    import gConfig from "@/store/modules/globalConfiguration";

    export default {
        name: "u-goods-list",
        props: {
            // 活动信息
            activity: {
                type: Object
            },
            // 是否为DIY
            isDIY: {
                type: Boolean,
                default: false
            },
            // 是否显示分类
            showCat: {
                type: Boolean
            },
            // 分裂列表
            catList: {
                type: Array
            },
            // 分类样式
            catStyle: {
                type: Number
            },
            // 主题色
            theme: {
                type: Object
            },
            // 商品列表
            list: {
                type: Array
            },
            // 列表样式 -1 列表模式 0 左右滑动 1 一行一个 2 一行两个 3 一行三个
            listStyle: {
                type: [Number , Boolean]
            },
            // 列表模式显示分割线 1 显示 0 不显示
            borderShow: {
                type: Number
            },
            // 商品样式 1 白底无边框 2 白底有边框 3 无底无边框
            goodsStyle: {
                type: Number
            },
            // 商品封面图是否填充 0 留白 1 填充
            fill: {
                type: Number,
                default: 1
            },
            // 商品右上角角标 url
            goodsTagPicUrl: {
                type: String
            },
            // 是否展示角标 0 不展示 1 展示
            showGoodsTag: {
                type: Number
            },
            // 是否展示商品名称 0 不展示 1 展示
            showGoodsName: {
                type: [Number, Boolean],
                default: 1
            },
            // 是否展示商品价格 0 不展示 1 展示
            showGoodsPrice: {
                type: [Number, Boolean],
                default: 1
            },
            // 显示购买按钮 0 不展示 1 展示
            showBuyBtn: {
                type: [Number, Boolean],
                default: 1
            },
            // 购买按钮样式 cart 购物车 add 加号 text 文字
            buyBtn: {
                type: String,
                default: 'cart'
            },
            // 按钮样式
            buyBtnStyle: {
                type: Number
            },
            // 按钮文案
            buyBtnText: {
                type: String
            },
            // text按钮颜色
            buttonColor: {
                type: String
            },
            // 文本对齐方式 1 左对齐 2 居中
            textStyle: {
                type: Number
            },
            // 商品封面图宽高比例 1-1 3-2
            goodsCoverProportion: {
                type: String
            },
            // 原价显示
            isUnderLinePrice: {
                type: Boolean,
                default: true
            },
            // 是否显示规格
            isShowAttr: {
                type: Boolean,
                default: false
            },
            isBuy: {
                type: Boolean,
                default: true
            },
            // 预览接口
            previewUrl: {
                type: String
            },
            // 支付接口
            submitUrl: {
                type: String
            },
            // 载入间隔
            addTime: {
                type: Number,
                default: 0
            },
            // 分页加载
            pagination: {
                type: Boolean,
                default: false
            },
            reset: {
                type: Boolean,
                default: false
            },
            //标签颜色
            tagColor: {
                type: String
            },
            //选中颜色
            catSelectedColor: {
                type: String
            },
            //未选中颜色
            catUnselectedColor: {
                type: String
            },
            //背景色
            catBgColor: {
                type: String
            },
        },
        computed: {
            ...mapState({
                // 全局设置
                appSetting: function(state) {
                    return state.mallConfig.mall.setting
                },
                // 小程序图片
                appImg: function(state) {
                    return state.mallConfig.__wxapp_img.mall;
                },
                // 全局显示购物车
                isShowCart: function(state) {
                    return !this.isDIY && state.mallConfig.mall.setting.is_show_cart && this.showBuyBtn;
                },
                // 全局显示商品名称
                isShowGoodsName: function(state) {
                    return !this.isDIY && state.mallConfig.mall.setting.is_show_goods_name;
                },
                platform: function(state) {
                    return state.gConfig.systemInfo.platform;
                }
            }),
            ...mapGetters('mallConfig',{
                getVideo: 'getVideo'
            }),
            // 获取商品数组
            copyList() {
                if (!this.is_show_off) return [];
                if (this.showCat) {
                    return this.catList[this.activeCurrent].goodsList;
                } else {
                    return this.list;
                }
            },
            // 商品样式
            goodsStyleObject: function() {
                let str = '';
                this.goodsStyle === 2 ? str += 'u-is-border ' : '';
                this.goodsStyle !== 3 ? str += 'u-white-back': '';
                return str;
            },
            // 商品封面图是否填充
            mode: function() {
                let str = '';
                this.fill === 1 ? str = 'aspectFill' : str = 'aspectFit';
                return str;
            },
            // 售罄图片
            sellOutPic: function() {
                return this.appSetting.is_use_stock === '1' ?  this.appImg.plugins_out : this.appSetting.sell_out_pic;
            },
            // 角标弧度
            tagLeftTop: function() {
                return this.listStyle === -1 || this.listStyle === 0 || this.listStyle === 2 || this.listStyle === 3 ? 'u-goods-tag-radius' : '';
            },
            // 文字按钮样式
            buyBtnClass: function() {
                let buyBtnClass = ``;
                if (this.buyBtnStyle == 2 || this.buyBtnStyle == 4) {
                    buyBtnClass += `u-text-btn-border `;
                }
                if (this.buyBtnStyle == 4 || this.buyBtnStyle == 3) {
                    buyBtnClass += `u-text-btn-radius`;
                }
                return buyBtnClass;
            },
            // 按钮样式
            btnStyle: function() {
                let btnStyle = ``;
                if (this.buyBtnStyle == 1 || this.buyBtnStyle == 3) {
                    btnStyle += `background-color: ${this.buttonColor ? this.buttonColor : this.theme.background};color: #ffffff;`;
                } else {
                    btnStyle += `border-color: ${this.buttonColor ? this.buttonColor : this.theme.background};color: ${this.buttonColor};`;
                }
                return btnStyle;
            },
			disabledBtn: function() {
                let btnStyle = ``;
                if (this.buyBtnStyle == 1 || this.buyBtnStyle == 3) {
                    btnStyle += `background-color: ${this.disabledColor};color: #ffffff;`;
                } else {
                    btnStyle += `border-color: ${this.disabledColor};color: ${this.disabledColor};`;
                }
                return btnStyle;
			},
            // 文本对齐方式
            textAlign: function() {
                return this.textStyle === 2 ? 'u-text-align' : null;
            },
            // 插件对齐方式
            pluginAlign: function() {
                return this.textStyle === 2 ? 'dir-left-nowrap main-center' : null;
            },
            // 一行一个图片高度
            coverPicHeight: function() {
                return this.goodsCoverProportion === '1-1' ? '702rpx' : '468rpx';
            },
            // 商品列表样式
            goodsListClass: function() {
                if (this.listStyle === 2) {
                    return 'dir-left-wrap main-between u-goods-list';
                } else if (this.listStyle === 3) {
                    return 'dir-left-wrap main-left u-one-line-three-list';
                } else if (this.listStyle === 0) {
                    return 'u-swipe-left-right-list';
                } else if (this.borderShow === 1) {
                    return 'u-goods-list u-bottom-border';
                } else {
                    return 'u-goods-list';
                }
            }
        },
        data() {
            return {
                // 当前选中分类
                activeCurrent: 0,
                // 是否展示
                is_show_off: true,
                // 规格商品
                attrGoods: {
                    goods: {},
                    attrShow: 0
                },
                // 临时列表
                tempList: [],
                // 商品数组
                goodsList: [],
				disabledColor: '#999999',
				disable: 'disable',
            }
        },
        methods: {
            // 复制而不是引用对象和数组
            cloneData(data) {
                return JSON.parse(JSON.stringify(data));
            },
            // 循环载入
            splitData() {
                if (!this.tempList.length) return;
                let item = this.tempList[0];
                this.goodsList.push(item);
                this.tempList.splice(0, 1);
                if (this.tempList.length) {
                    setTimeout(() => {
                        this.splitData();
                    }, this.addTime);
                }
            },
            // 切换分类
            changeNav(index) {
                this.goodsList = [];
                this.activeCurrent = index;
                this.tempList = this.cloneData(this.copyList);
                this.splitData();
            },
            // 是否展示售罄
            isShowStock(goods) {
                return this.appSetting.is_show_stock === 1 && goods.goods_stock === 0 ? 1: 0;
            },
            // 是否展示购物按钮
            isShowBuyBtn(goods) {
                return this.showBuyBtn && goods.goods_stock !== 0 && goods.is_negotiable !== 1 ? 1 : 0;
            },
            // 是否展示会员价
            isShowMemPrice(goods) {
                return (goods.level_show === 1 || goods.level_show === 2) && goods.is_negotiable !== 1 ? 1 : 0;
            },
            // 是否展示超级会员价
            isShowVip(goods) {
                return goods.vip_card_appoint && goods.vip_card_appoint.discount && goods.is_negotiable !== 1 ? 1 : 0;
            },
            // 是否显示原价
            isShowOriginalPrice(goods) {
                return this.isUnderLinePrice && goods.is_negotiable !== 1 ? 1 : 0;
            },
            // 购买按钮点击事件
            buyProduct(goods) {
                if(this.isBuy) {
                    if (this.isShowAttr) {
                        this.attrGoods.goods = goods;
                        this.attrGoods.attrShow = Math.random();
                    } else {
                        uni.showLoading({
                            text: '',
                            mask: true
                        });
                        this.$request({
                            url: this.$api.goods.attr,
                            data: {
                                id: goods.id,
                                mch_id: goods.mch_id
                            }
                        }).then(e => {
                            uni.hideLoading();
                            if (e.code === 0) {
                                let data = Object.assign(goods, e.data);
                                this.$emit('buyProduct', {
                                    goods: data,
                                    attrShow: Math.random()
                                });
                            } else {
                                uni.showToast({
                                    title: e.msg,
                                    icon: 'none'
                                })
                            }
                        })
                    }
                }else {
                    this.router(goods.id);
                }
            },
            // 路由跳转
            router(id) {
                uni.navigateTo({
                    url: '/pages/goods/goods?id='+id
                });
                
            },
            empty() {
                this.goodsList = [];
            }
        },
        watch: {
            catList: {
                handler(newValue) {
                    if (!this.showCat) return;
                    !this.$validation.array(newValue) || this.$validation.isEmpty(newValue) ? this.is_show_off = false : this.is_show_off = true;
                },
                deep: true,
                immediate: true
            },
            copyList: {
               handler(nVal, oVal) {
                   if (nVal) {
                       if (this.pagination && !this.reset) {
                           let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
                           this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
                       } else {
                           this.goodsList = [];
                           this.tempList = this.cloneData(nVal);
                       }
                       this.splitData();
                   }
                   this.tempList && this.splitData();
               },
                deep: true,
                immediate: true
            }
        },
        components: {
            appAttr
        }
    }
</script>

<style lang="scss" scoped>

	page{
		background: #f3f3f3;
	}

	#apps{

		display: flex;
		flex-direction: column;
		
		
		
		// .info_img
		.info_img{
			width: 100%;
			height: auto;
			position: relative;
			z-index: 1;
			image{
				width: 100%;
				height: auto;
			}
		}
		
		
		
		// 商户介绍
		.shjs_box{
			background: #f3f3f3;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			margin-top: -20rpx;
			position: relative;
			z-index: 1;
			border-radius: 20rpx;
			
			.box{
				background: #fff;
				padding: 36rpx 22rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
			}
			
			.logo_box{
				display: flex;
				align-items: center;
				.logo{
					width: 144rpx;
					height: auto;
					image{
						width: 144rpx;
						border-radius: 100px;
						height: auto;
					}
				}
				.text{
					margin-left: 20rpx;
					.t{
						font-size: 48rpx;
						font-weight: bold;
					}
					.star_box{
						margin: 15rpx 0;
						display: flex;
						align-items: center;
						.star{
							display: flex;
							align-items: center;
							image{
								width: 26rpx;
								height: auto;
							}
						}
						.fs{
							font-size: 22rpx;
							color: $index_color;
							font-weight: bold;
							margin: 0 10rpx;
							box-sizing: border-box;
						}
						.price{
							font-size: 22rpx;
							color: #666;
						}
					}
				}
				.ts{
					display: flex;
					align-items: center;
					image{
						width: 40rpx;
						height: auto;
					}
					text{
						font-size: 28rpx;
						color: #333;
						margin-left: 20rpx;
					}
				}
			}
			
		}
		
		
		
		// 店铺简介
		.dpjj{
			display: block;
			margin-top: 30rpx;
			.t{
				display: flex;
				align-items: center;
				image{
					width: 40rpx;
					height: auto;
				}
				text{
					font-size: 28rpx;
					margin-left: 10rpx;
				}
			}
			.s{
				font-size: 28rpx;
				color: #666;
				padding-left: 50rpx;
				padding-top: 10rpx;
				display: block;
				line-height: 40rpx;
			}
		}
		
		
		// 买单
		.maidan{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			line-height: 40rpx;
			.text{
				flex: 1;
				margin-right: 80rpx;
				.time{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #666;
					image{
						width: 12rpx;
						height: auto;
					}
					text{
						margin-right: 20rpx;
					}
				}
				.desc{
					font-size: 24rpx;
					color: #666;
					image{
						width: 12rpx;
						height: auto;
						margin-left: 20rpx;
					}
				}
			}
			
			button{
				width: 120rpx;
				height: 120rpx;
				background:$index_color;
				box-shadow: 0px 10px 14px rgba(224, 79, 66, 0.45);
				border-radius: 50%;
				color: #fff;
				font-size: 34rpx;
				line-height: 120rpx;
				margin: 0 20rpx 20rpx 0;
			}
		}
		
		
		
		// tab
		.tab{
			display: flex;
			align-items: center;
			padding: 10rpx 32rpx;
			box-sizing: border-box;
			text{
				font-size: 32rpx;
				color: #666;
				font-weight: bold;
				margin-right: 40rpx;
				&.active{
					color: #333;
					position: relative;
					&::after{
						content: '';
						background: $index_color;
						width: 80%;
						height: 8rpx;
						border-radius: 100px;
						display: inline-block;
						position: absolute;
						left: 0;
						right: 0;
						bottom: -10rpx;
						margin: auto;
					}
				}
			}
		}
		
		
		
		// list
		.list{
			padding: 32rpx;
			box-sizing: border-box;
			.list_item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 26rpx 20rpx;
				margin-bottom: 20rpx;
				image{
					width: 160rpx;
					height: 160rpx;
					border-radius: 20rpx;
				}
				.text{
					flex: 1;
					margin-left: 30rpx;
					.t{
						font-size: 32rpx;
						font-weight: bold;
						display: block;
						line-height: 30rpx;
					}
					.s{
						font-size: 22rpx;
						color: $index_color;
					}
					.price{
						margin-top: 20rpx;
						.xj{
							font-size: 26rpx;
							color: $index_color;
							font-weight: bold;
							/* &::before{
								content: '￥';
								font-size: 20rpx;
								color: #666;
								font-weight: normal;
							} */
						}
						.yj{
							font-size: 22rpx;
							color: #999;
							margin-left: 20rpx;
							font-weight: bold;
							text-decoration:line-through;
							&::before{
								content: '￥';
								font-size: 22rpx;
								color: #999;
								font-weight: normal;
							}
						}
					}
				}
				
				.btns{
					button{
						width: 120rpx;
						height: 58rpx;
						line-height: 58rpx;
						color: #fff;
						font-size: 32rpx;
						background: linear-gradient(180deg, #DE4335 0%, #F88365 100%);
						box-shadow: 0px 6rpx 12rpx rgba(246, 126, 97, 0.47);
						border-radius: 10rpx;
					}
					text{
						font-size: 22rpx;
						color: #999;
						display: block;
						text-align: center;
						margin-top: 10rpx;
					}
				}
			}
		}
		
		
		
	}
	

</style>